<template>
	<achievement-card :title="title">
		<el-form ref="form" size="medium" :model="dataForm" label-width="100px">
			<div class="body" v-for="(item, index) in dataForm.options" :key="index">
				<template v-if="dataForm.options.length > 1">
					<el-button class="delete" type="text" icon="sw-icon-delete" @click="handleDeleteData(index)"></el-button>
				</template>
				<template v-if="!!labelObject.filed1">
					<el-form-item :label="labelObject.filed1" :prop="`options.${index}.filed1`" :rules="formRules.filed1">
						<el-input v-model="item.filed1" :placeholder="`输入${labelObject.filed1}`"></el-input>
					</el-form-item>
				</template>
				<template v-if="!!labelObject.filed2">
					<el-form-item :label="labelObject.filed2" :prop="`options.${index}.filed2`" :rules="formRules.filed2">
						<el-input v-model="item.filed2" :placeholder="`输入${labelObject.filed2}`"></el-input>
					</el-form-item>
				</template>
				<el-row :gutter="24">
					<el-col :span="8" v-if="!!labelObject.filed3">
						<el-form-item :label="labelObject.filed3" :prop="`options.${index}.filed3`" :rules="formRules.filed3">
							<el-input v-model="item.filed3" :placeholder="`输入${labelObject.filed3}`"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="9" v-if="!!labelObject.filed4">
						<el-form-item :label="labelObject.filed4" :prop="`options.${index}.filed4`" :rules="formRules.filed4">
							<el-date-picker
								type="date"
								style="width: 100%"
								v-model="item.filed4"
								value-format="yyyy-MM-dd"
								:placeholder="`选择${labelObject.filed4}`"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="7" v-if="!!labelObject.filed5">
						<el-form-item :label="labelObject.filed5" :label-width="labelWidth" :prop="`options.${index}.filed5`" :rules="formRules.filed5">
							<template v-if="type === '2'">
								<el-select v-model="item.filed5" :placeholder="`选择${labelObject.filed5}`">
									<el-option v-for="(item, index) in dictEnums['PATENT_TYPE']" :key="index" :value="item.msg"></el-option>
								</el-select>
							</template>
							<template v-else-if="type === '4'">
								<el-select v-model="item.filed5" :placeholder="`选择${labelObject.filed5}`">
									<el-option v-for="(item, index) in dictEnums['AWARD_LEVEL']" :key="index" :value="item.msg"></el-option>
								</el-select>
							</template>
							<template v-else>
								<el-input v-model="item.filed5" :placeholder="`输入${labelObject.filed5}`"></el-input>
							</template>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="上传文件" :prop="`options.${index}.fileJson`" :rules="formRules.fileJson">
					<gx-file-uploader :type="uploadType" v-model="item.fileJson"></gx-file-uploader>
				</el-form-item>
			</div>
		</el-form>
		<template v-if="page !== 'edit'">
			<el-button class="added" size="small" type="primary" @click="handleAddedData()">新增一项</el-button>
		</template>
	</achievement-card>
</template>

<script>
import { mapGetters } from 'vuex';
import achievementCard from './card';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	components: { achievementCard },
	props: {
		type: { type: String, default: '' },
		page: { type: String, default: '' },
		title: { type: String, default: '' },
		value: { type: Array, default: () => [] }
	},
	data() {
		return {
			dataForm: {
				options: this.value
			},
			formRules: {}
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		labelObject() {
			if (this.type === '1') {
				return { filed1: '论文标题', filed2: '期刊名称', filed3: '期刊号', filed4: '出版时间', filed5: 'DOI' };
			} else if (this.type === '2') {
				return { filed1: '专利名称', filed3: '专利号', filed4: '授权时间', filed5: '专利类别' };
			} else if (this.type === '3') {
				return { filed1: '论文标题', filed2: '会议名称', filed4: '会议时间' };
			} else if (this.type === '4') {
				return { filed1: '获奖项目', filed3: '授奖单位', filed4: '获奖时间', filed5: '奖励级别' };
			}
		},
		rulesTrigger() {
			if (this.type === '1') {
				return { filed1: 'blur', filed2: 'blur', filed3: 'blur', filed4: 'change', filed5: 'blur' };
			} else if (this.type === '2') {
				return { filed1: 'blur', filed3: 'blur', filed4: 'change', filed5: 'change' };
			} else if (this.type === '3') {
				return { filed1: 'blur', filed2: 'blur', filed4: 'change' };
			} else if (this.type === '4') {
				return { filed1: 'blur', filed3: 'blur', filed4: 'change', filed5: 'change' };
			}
		},
		uploadType() {
			if (this.type === '1') {
				return '8';
			} else if (this.type === '2') {
				return '9';
			} else if (this.type === '3') {
				return '10';
			} else if (this.type === '4') {
				return '11';
			}
		},
		labelWidth() {
			return this.type === '1' ? '60px' : '100px';
		}
	},
	watch: {
		value(arr) {
			this.$set(this.dataForm, 'options', arr);
		},
		dataForm: {
			handler(data) {
				this.$emit('input', data.options);
				this.dispatch('ElFormItem', 'el.form.change', [data.options]);
			},
			deep: true
		}
	},
	mounted() {
		let dataObject = {};
		if (this.value.length === 0) {
			dataObject = { filed1: '', filed2: '', filed3: '', filed4: '', filed5: '' };
		} else {
			dataObject = { ...this.value[0] };
		}
		this.$set(this.dataForm, 'options', [dataObject]);
		this.formRules = this.formatFormRules();
		if (this.type === '1') {
			this.$set(this.formRules, 'fileJson', [{ required: true, message: '请上传期刊文件', trigger: 'change' }]);
		}
	},
	methods: {
		//格式化验证
		formatFormRules() {
			let rulesObject = {};
			let rulesFields = ['filed1', 'filed2', 'filed3', 'filed4', 'filed5'];
			rulesFields.forEach((item) => {
				if (!!this.labelObject[item] && !!this.rulesTrigger[item]) {
					let messageText = '';
					if (this.rulesTrigger[item] === 'change') {
						messageText = `请选择${this.labelObject[item]}`;
					} else if (this.rulesTrigger[item] === 'blur') {
						messageText = `请输入${this.labelObject[item]}`;
					}
					rulesObject[item] = { required: true, message: messageText, trigger: this.rulesTrigger[item] };
				}
			});
			return rulesObject;
		},

		handleAddedData() {
			let obj = { filed1: '', filed2: '', filed3: '', filed4: '', filed5: '' };
			this.dataForm.options.push(obj);
		},

		handleDeleteData(index) {
			this.dataForm.options.splice(index, 1);
		},

		validateForm() {
			return new Promise((resolve) => {
				this.$refs['form'].validate((valid) => {
					resolve(valid);
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
